<template>
    <div class="instance-container">
        <base-table :data="instanceData"
                    :checked="checkedData"
                    :option="tableOption"
                    :height="'calc(100vh - 305px)'"
                    :loading="loadingState"
                    :filter-enable="true"
                    rowKey="procInstId"
                    stripe
                    @select="onSelect"
                    @sort-change="onSortChange"
                    @refresh="getInstanceInfo"
                    @filterReset="onRefresh"
                    @pageChange="onPageChange"
                    @onClickFilter="onClickFilter">
            <template slot="table-slot-suspensionState" slot-scope="scope">
                <div class="instance-state-container">
                    <span class="instance-state"
                          :class="{'running':scope.row.suspensionState  === instanceState.enable}">
                        {{
                            translate(scope.row.suspensionState === scope.row.suspensionState ? 'label.active' : 'label.hangUp')
                        }}
                    </span>
                </div>
            </template>
            <template slot="table-slot-operation" slot-scope="scope">
                <div class="instance-btn-container">
                    <el-tooltip class="item" :content="translate('button.changeApprover')" placement="top">
                        <i class="iconfont icon-biangeng"></i>
                    </el-tooltip>
                    <el-tooltip class="table-icon-red" :content="translate('button.changeInstanceState')" placement="top">
                        <i class="iconfont icon-zuofei"></i>
                    </el-tooltip>
                </div>
            </template>
        </base-table>
    </div>
</template>

<script lang="ts">
import BaseVue from "@/common/base-vue.vue";
import {Component} from "vue-property-decorator";
import BaseTable from "@/components-sys/base-table/base-table.vue";
import ResponseModel from "@/common/model/response.model";
import {InstanceModel} from "@/views/bpm/instance/model/instance.model";
import RequestModel from "@/common/model/request.model";
import BaseTableOptionModel from "@/components-sys/base-table/model/base-table-option.model";
import {PageEnum, ResponseStatusEnum} from "@/common/enum/common.enum";
import {ColumnTypeEnum, FilterTypeEnum, SelectionEnum} from "@/components-sys/base-table/enums/base-table.enum";
import InstanceService from "@/views/bpm/instance/instance.service";
import OrderModel from "@/common/model/order.model";
import _ from "lodash";
import PagesModel from "@/components-sys/pages/pages.model";
import {InstanceStateEnum} from "@/views/bpm/instance/enum/instance.enum";

@Component({components: {BaseTable}})
export default class Instance extends BaseVue {
    
    /**
     * 实例信息
     */
    private instanceData: ResponseModel<InstanceModel[]> = new ResponseModel<InstanceModel[]>();
    /**
     * 请求参数
     */
    private param = new RequestModel();
    /**
     * 选中数据
     */
    private checkedData: InstanceModel[] = [];
    /**
     * 表格配置
     */
    private tableOption: BaseTableOptionModel = new BaseTableOptionModel();
    /**
     * 表格loading状态
     */
    private loadingState = false;
    
    /**
     * 实例状态枚举
     */
    private instanceState = InstanceStateEnum;
    
    /**
     * 初始化表格配置
     * 请求列表数据
     */
    private mounted() {
        this.param.pageIndex = PageEnum.initPageIndex;
        this.param.pageSize = PageEnum.initPageSize;
        this.tableOption.selection = SelectionEnum.checkbox;
        this.tableOption.column = [
            {
                label: 'label.suspensionState',
                prop: 'suspensionState',
                sortable: true,
                filterEnable: true,
                type: ColumnTypeEnum.slot,
                filterType: FilterTypeEnum.select,
                filterOptions: [{
                    label: 'label.active', value: InstanceStateEnum.enable
                }, {
                    label: 'label.hangUp', value: InstanceStateEnum.disable
                }]
            },
            {label: 'label.instanceModelName', prop: 'modelName', sortable: true, filterEnable: true},
            {label: 'label.instanceStartBy', prop: 'starter', sortable: true, filterEnable: true},
            {label: 'label.instanceStartTime', prop: 'startTime', sortable: true, filterEnable: true},
            {label: 'label.taskApprover', prop: 'assignee', sortable: true, filterEnable: true},
            {label: 'label.operation', prop: 'operation', sortable: false, type: ColumnTypeEnum.slot}
        ];
        this.getInstanceInfo();
    }
    
    /**
     * 获取列表数据
     */
    private getInstanceInfo() {
        this.loadingState = true;
        InstanceService.getModelList(this.param).then((res: ResponseModel<InstanceModel[]>) => {
            if (res.status === ResponseStatusEnum.success) {
                this.instanceData = res;
            }
        }).finally(() => this.loadingState = false);
    }
    
    
    /**
     * 排序
     */
    private onSortChange(order: OrderModel) {
        if (_.isEmpty(order)) {
            delete this.param.orderBy;
        } else {
            this.param.orderBy = [order];
        }
        this.getInstanceInfo();
    }
    
    /**
     * 刷新
     */
    private onRefresh() {
        delete this.param.data;
        this.getInstanceInfo();
    }
    
    /**
     * 点击过滤
     * @param data
     */
    private onClickFilter(data: InstanceModel) {
        this.param = new RequestModel(data);
        this.resetParam();
    }
    
    /**
     * 分页
     * @param data
     * @private
     */
    private onPageChange(data: PagesModel) {
        this.param.pageIndex = data.pageIndex;
        this.param.pageSize = data.pageSize;
        this.getInstanceInfo();
    }
    
    /**
     * 重设参数
     * @private
     */
    private resetParam() {
        this.param.pageIndex = PageEnum.initPageIndex;
        this.param.pageSize = PageEnum.initPageSize;
        this.getInstanceInfo();
    }
    
    /**
     * 选中数据
     */
    private onSelect(data: InstanceModel[]) {
        this.checkedData = data;
    }
    
    private onDelete() {
    
    }
}
</script>

<style scoped lang="scss">
.instance-container {
    .instance-state-container {
        padding: 0 20px;
        
        .instance-state {
            position: relative;
            
            &:before {
                position: absolute;
                content: " ";
                top: 3px;
                left: -20px;
                width: 10px;
                height: 10px;
                background-color: #409cfb;
                border-radius: 50%;
            }
            
            &.running:before {
                background-color: #67c539;
            }
        }
    }
    
    .instance-btn-container {
        padding-left: 20px;
    }
}

</style>
